/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */

import { graphql, useStaticQuery } from "gatsby"
import * as  React from "react"
import "typeface-roboto"
import Footer from "./footer"
import Header from "./header"
import "./layout.css"

interface LayoutProps {
  children?: React.ReactNode
}

function Layout(props: LayoutProps) {
  const { children } = props

  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title}/>
      <main>{children}</main>
      <Footer/>
    </>
  )
}

export default Layout
